<template>
  <div class="group-transaction px-2">
    <el-button size="small" class="mb-3" @click="$router.back()">{{ $t('common.back') }}</el-button>
    <el-card class="my-3">
      <template #header>
      <div class="flex justify-between items-center">
        <h2>{{ $t('modules.tms.group.toms_online_trading_configuration') }}</h2>
        <el-button type="primary" @click="saveTradeCfgData">{{ $t('common.save') }}</el-button>
      </div>
    </template>
      <el-form @submit.prevent.native ref="interfaceForm" :model="interfaceForm">
        <div class="mb-3">
          <p class="mb-2 font-bold">{{ $t('modules.tms.group.check_instructions') }}</p>
          <div>
            <el-input-number v-model="interfaceForm.cmdQryPeriod" class="w-3/12 mr-5" :min="0" :step="1" step-strictly />
            <el-radio-group v-model="interfaceForm.cmdQryPeriodUnit">
              <el-radio label="H">{{ $t('page.hour') }}</el-radio>
              <el-radio label="D">{{ $t('page.day') }}</el-radio>
            </el-radio-group>
            <el-switch
              v-model="interfaceForm.cmdQryChk"
              active-value="1"
              inactive-value="0"
              class="float-right"
            />
          </div>
        </div>

        <div class="mb-3">
          <p
            class="mb-2 font-bold"
          >{{ $t('modules.tms.group.upload_version_info') }}</p>
          <div>
            <el-input-number v-model="interfaceForm.dataCollPeriod" class="w-3/12 mr-5" :min="0" :step="1" step-strictly />
            <el-radio-group v-model="interfaceForm.dataCollPeriodUnit">
              <el-radio label="H">{{ $t('page.hour') }}</el-radio>
              <el-radio label="D">{{ $t('page.day') }}</el-radio>
            </el-radio-group>
            <el-switch
              v-model="interfaceForm.dataCollChk"
              active-value="1"
              inactive-value="0"
              class="float-right"
            />
          </div>
        </div>

        <div class="mb-3">
          <p class="mb-2 font-bold">{{ $t('modules.tms.group.check_updated') }}</p>
          <div>
            <el-input-number v-model="interfaceForm.devAppVUpPeriod" class="w-3/12 mr-5" :min="0" :step="1" step-strictly />
            <el-radio-group v-model="interfaceForm.devAppVUpPeriodUnit">
              <el-radio label="H">{{ $t('page.hour') }}</el-radio>
              <el-radio label="D">{{ $t('page.day') }}</el-radio>
            </el-radio-group>
            <el-switch
              v-model="interfaceForm.devAppVUpChk"
              active-value="1"
              inactive-value="0"
              class="float-right"
            />
          </div>
        </div>

        <div class="mb-3">
          <p class="mb-2 font-bold">{{ $t('modules.tms.group.keep_connection') }}</p>
          <div>
            <el-input-number v-model="interfaceForm.heartbeatPeriod" class="w-3/12 mr-5" :min="0" :step="1" step-strictly />
            <el-radio-group v-model="interfaceForm.heartbeatPeriodUnit">
              <el-radio label="M">{{ $t('page.min') }}</el-radio>
            </el-radio-group>
            <el-switch
              v-model="interfaceForm.heartbeatChk"
              active-value="1"
              inactive-value="0"
              class="float-right"
            />
          </div>
        </div>

        <div class="mb-3">
          <p
            class="mb-2 font-bold"
          >{{ $t('modules.tms.group.configuration_of_transaction') }}</p>
          <div>
            <el-input-number v-model="interfaceForm.tradeCfgPeriod" class="w-3/12 mr-5" :min="0" :step="1" step-strictly />
            <el-radio-group v-model="interfaceForm.tradeCfgPeriodUnit">
              <el-radio label="H">{{ $t('page.hour') }}</el-radio>
              <el-radio label="D">{{ $t('page.day') }}</el-radio>
            </el-radio-group>
            <el-switch
              v-model="interfaceForm.tradeCfgChk"
              active-value="1"
              inactive-value="0"
              class="float-right"
            />
          </div>
        </div>

        <div class="mb-3">
          <p class="mb-2 font-bold">{{ $t('modules.tms.group.collect_data') }}</p>
          <div>
            <el-input-number v-model="interfaceForm.updatePeriod" class="w-3/12 mr-5" :min="0" :step="1" step-strictly />
            <el-radio-group v-model="interfaceForm.updatePeriodUnit">
              <el-radio label="H">{{ $t('page.hour') }}</el-radio>
              <el-radio label="D">{{ $t('page.day') }}</el-radio>
            </el-radio-group>
            <el-switch
              v-model="interfaceForm.updateChk"
              active-value="1"
              inactive-value="0"
              class="float-right"
            />
          </div>
        </div>
      </el-form>
    </el-card>

    <el-card class="collection-card">
      <template #header>
      <div class="flex justify-between items-center">
        <h2 class="inline-block">{{ $t('modules.tms.group.collection_item_configuration') }}</h2>
        <el-button type="primary" @click="saveDataCollData">{{ $t('common.save') }}</el-button>
      </div>
    </template>
      <el-row type="flex">
        <el-col :md="12" class="border-r border-b p-5">
          <h2 class="mb-2">{{ $t('modules.tms.group.terminal_usage') }}</h2>
          <div class="mb-2">
            <span>{{ $t('modules.tms.group.number_of_turn_on_and_turn_off') }}</span>
            <el-switch
              v-model="collectionForm.POWER_OPERATION_COUNTS"
              active-value="1"
              inactive-value="0"
              class="float-right"
            />
          </div>

          <div class="mb-2">
            <span>{{ $t('modules.tms.group.meters_of_printer_prints') }}</span>
            <el-switch
              v-model="collectionForm.PRINT_MITERS_COUNTS"
              active-value="1"
              inactive-value="0"
              class="float-right"
            />
          </div>

          <div class="mb-2">
            <span>{{ $t('modules.tms.group.number_of_software_attacked') }}</span>
            <el-switch
              v-model="collectionForm.SOFTWARE_ATTACK_COUNTS"
              active-value="1"
              inactive-value="0"
              class="float-right"
            />
          </div>

          <div class="mb-2">
            <span>{{ $t('modules.tms.group.time_of_software_attacked') }}</span>
            <el-switch
              v-model="collectionForm.SOFTWARE_ATTACK_TIME"
              active-value="1"
              inactive-value="0"
              class="float-right"
            />
          </div>

          <div class="mb-2">
            <span>{{ $t('modules.tms.group.number_of_hardware_attacked') }}</span>
            <el-switch
              v-model="collectionForm.HARDWARE_ATTACK_COUNTS"
              active-value="1"
              inactive-value="0"
              class="float-right"
            />
          </div>

          <div class="mb-2">
            <span>{{ $t('modules.tms.group.time_of_hardware_attacked') }}</span>
            <el-switch
              v-model="collectionForm.HARDWARE_ATTACK_TIME"
              active-value="1"
              inactive-value="0"
              class="float-right"
            />
          </div>

          <div class="mb-2">
            <span>{{ $t('modules.tms.group.times_of_usb') }}</span>
            <el-switch
              v-model="collectionForm.USB_OPERATION_COUNTS"
              active-value="1"
              inactive-value="0"
              class="float-right"
            />
          </div>

          <div class="mb-2">
            <span>{{ $t('modules.tms.group.storage_capacity') }}</span>
            <el-switch
              v-model="collectionForm.STORAGE_AVAILABLE"
              active-value="1"
              inactive-value="0"
              class="float-right"
            />
          </div>

          <div class="mb-2">
            <span>{{ $t('modules.tms.group.memory_read_write_times') }}</span>
            <el-switch
              v-model="collectionForm.STORATE_BRUSH_COUNTS"
              active-value="1"
              inactive-value="0"
              class="float-right"
            />
          </div>

          <div class="mb-2">
            <span>{{ $t('modules.tms.group.number_of_power_button_presses') }}</span>
            <el-switch
              v-model="collectionForm.POWERBUTTON_PRESSED_COUNTS"
              active-value="1"
              inactive-value="0"
              class="float-right"
            />
          </div>

          <div class="mb-2">
            <span>{{ $t('modules.tms.group.number_of_touch_screen_clicks') }}</span>
            <el-switch
              v-model="collectionForm.SCREEN_TOUCHED_COUNTS"
              active-value="1"
              inactive-value="0"
              class="float-right"
            />
          </div>

          <div class="mb-2">
            <span>{{ $t('modules.tms.group.number_of_camera_opens') }}</span>
            <el-switch
              v-model="collectionForm.CAMERA_OPENED_COUNTS"
              active-value="1"
              inactive-value="0"
              class="float-right"
            />
          </div>

          <div class="mb-2">
            <span>{{ $t('modules.tms.group.total_charge_times') }}</span>
            <el-switch
              v-model="collectionForm.BATTERY_OPERATION_COUNTS"
              active-value="1"
              inactive-value="0"
              class="float-right"
            />
          </div>

          <div class="mb-2">
            <span>{{ $t('modules.tms.group.battery_status') }}</span>
            <el-switch
              v-model="collectionForm.BATTERY_STATUS"
              active-value="1"
              inactive-value="0"
              class="float-right"
            />
          </div>

          <div class="mb-2">
            <span>{{ $t('modules.tms.group.electricity_value') }}</span>
            <el-switch
              v-model="collectionForm.BATTERY_AVAILABLE"
              active-value="1"
              inactive-value="0"
              class="float-right"
            />
          </div>
        </el-col>
        <div class="flex flex-col flex-1">
          <el-col :md="12" class="border-r border-b p-5 w-full">
            <h2 class="mb-2">{{ $t('modules.tms.group.communication') }}</h2>
            <div class="mb-2">
              <span>{{ $t('modules.tms.group.network_type') }}</span>
              <el-switch
                v-model="collectionForm.NETWORK_TYPE"
                active-value="1"
                inactive-value="0"
                class="float-right"
              />
            </div>

            <div class="mb-2">
              <span>{{ $t('modules.tms.group.signal_intensity') }}</span>
              <el-switch
                v-model="collectionForm.SIGNAL_STRENGTH"
                active-value="1"
                inactive-value="0"
                class="float-right"
              />
            </div>

            <div class="mb-2">
              <span>{{ $t('modules.tms.group.signal_strength_level') }}</span>
              <el-switch
                v-model="collectionForm.SIGNAL_LEVEL"
                active-value="1"
                inactive-value="0"
                class="float-right"
              />
            </div>

            <div class="mb-2">
              <span>{{ $t('modules.tms.group.power_and_screen_mark') }}</span>
              <el-switch
                v-model="collectionForm.DEVICE_OPERATION_EVENT"
                active-value="1"
                inactive-value="0"
                class="float-right"
              />
            </div>

            <div class="mb-2">
              <span>{{ $t('modules.tms.group.online_status_with_terminal_model') }}</span>
              <el-switch
                v-model="collectionForm.MODEL_ONLINE_STATUS"
                active-value="1"
                inactive-value="0"
                class="float-right"
              />
            </div>

            <div class="mb-2">
              <span>{{ $t('modules.tms.group.online_status') }}</span>
              <el-switch
                v-model="collectionForm.ONLINE_STATUS"
                active-value="1"
                inactive-value="0"
                class="float-right"
              />
            </div>

            <div class="mb-2">
              <span>IMEI/MEID</span>
              <el-switch
                v-model="collectionForm.IMEI"
                active-value="1"
                inactive-value="0"
                class="float-right"
              />
            </div>

            <div class="mb-2">
              <span>{{ $t('modules.tms.group.wifi_status') }}</span>
              <el-switch
                v-model="collectionForm.WIFI_STATUS"
                active-value="1"
                inactive-value="0"
                class="float-right"
              />
            </div>

            <div class="mb-2">
              <span>{{ $t('modules.tms.terminal.wifissid') }}</span>
              <el-switch
                v-model="collectionForm.SSID"
                active-value="1"
                inactive-value="0"
                class="float-right"
              />
            </div>

            <div class="mb-2">
              <span>{{ $t('modules.tms.group.bluetooth_status') }}</span>
              <el-switch
                v-model="collectionForm.BLUETOOTH_STATUS"
                active-value="1"
                inactive-value="0"
                class="float-right"
              />
            </div>

            <div class="mb-2">
              <span>{{ $t('modules.tms.group.network_status') }}</span>
              <el-switch
                v-model="collectionForm.NETWORK_STATUS"
                active-value="1"
                inactive-value="0"
                class="float-right"
              />
            </div>
          </el-col>

          <el-col :md="12" class="border-r border-b p-5 w-full">
            <h2 class="mb-2">{{ $t('modules.tms.group.security_module') }}</h2>
            <div class="mb-2">
              <span>{{ $t('modules.tms.group.printer_status') }}</span>
              <el-switch
                v-model="collectionForm.PRINTER_STATUS"
                active-value="1"
                inactive-value="0"
                class="float-right"
              />
            </div>

            <div class="mb-2">
              <span>{{ $t('modules.tms.group.ic_card_status') }}</span>
              <el-switch
                v-model="collectionForm.ICCARD_STATUS"
                active-value="1"
                inactive-value="0"
                class="float-right"
              />
            </div>

            <div class="mb-2">
              <span>{{ $t('modules.tms.group.rf_card_status') }}</span>
              <el-switch
                v-model="collectionForm.RFCARD_STATUS"
                active-value="1"
                inactive-value="0"
                class="float-right"
              />
            </div>

            <div class="mb-2">
              <span>{{ $t('modules.tms.group.magnetic_card_status') }}</span>
              <el-switch
                v-model="collectionForm.MAGNETICCARD_STATUS"
                active-value="1"
                inactive-value="0"
                class="float-right"
              />
            </div>
          </el-col>
        </div>
      </el-row>

      <el-row type="flex">
        <el-col :md="12" class="border-r border-b p-5">
          <h2 class="mb-2">{{ $t('modules.tms.group.hardware_info') }}</h2>

          <div class="mb-2">
            <span>{{ $t('modules.tms.group.customer_id') }}</span>
            <el-switch
              v-model="collectionForm.CUSTOMER_ID"
              active-value="1"
              inactive-value="0"
              class="float-right"
            />
          </div>

          <div class="mb-2">
            <span>{{ $t('modules.tms.group.firmware_version') }}</span>
            <el-switch
              v-model="collectionForm.OTA_VERSION_V1"
              active-value="1"
              inactive-value="0"
              class="float-right"
            />
          </div>

          <div class="mb-2">
            <span>{{ $t('modules.tms.group.geo_location') }}</span>
            <el-switch
              v-model="collectionForm.LAT_LNG"
              active-value="1"
              inactive-value="0"
              class="float-right"
            />
          </div>

          <div class="mb-2">
            <span>{{ $t('modules.tms.group.terminal_model') }}</span>
            <el-switch
              v-model="collectionForm.DEVICE_MODEL"
              active-value="1"
              inactive-value="0"
              class="float-right"
            />
          </div>

          <div class="mb-2">
            <span>{{ $t('modules.tms.group.hardware_configuration_code') }}</span>
            <el-switch
              v-model="collectionForm.HARDWARE_CONFIG"
              active-value="1"
              inactive-value="0"
              class="float-right"
            />
          </div>

          <div class="mb-2">
            <span>{{ $t('modules.tms.group.hardware_identification_code') }}</span>
            <el-switch
              v-model="collectionForm.HARDWARE_ID"
              active-value="1"
              inactive-value="0"
              class="float-right"
            />
          </div>

          <div class="mb-2">
            <span>{{ $t('modules.tms.group.baseband_version') }}</span>
            <el-switch
              v-model="collectionForm.BASEBANK_VERSION"
              active-value="1"
              inactive-value="0"
              class="float-right"
            />
          </div>

          <div class="mb-2">
            <span>{{ $t('modules.tms.group.application_version_of_security_module') }}</span>
            <el-switch
              v-model="collectionForm.SECURE_APP_VERSION"
              active-value="1"
              inactive-value="0"
              class="float-right"
            />
          </div>

          <div class="mb-2">
            <span>{{ $t('modules.tms.group.firmware_version_of_security_module') }}</span>
            <el-switch
              v-model="collectionForm.SECURE_FW_VERSION"
              active-value="1"
              inactive-value="0"
              class="float-right"
            />
          </div>

          <div class="mb-2">
            <span>{{ $t('modules.tms.group.boot_version_of_security_module') }}</span>
            <el-switch
              v-model="collectionForm.SECURE_BOOT_VERSION"
              active-value="1"
              inactive-value="0"
              class="float-right"
            />
          </div>

          <div class="mb-2">
            <span>{{ $t('modules.tms.group.system_firmware_identification_code') }}</span>
            <el-switch
              v-model="collectionForm.SYS_FW_ID"
              active-value="1"
              inactive-value="0"
              class="float-right"
            />
          </div>

          <div class="mb-2">
            <span>{{ $t('modules.tms.group.firmware_upgraded_patch_list') }}</span>
            <el-switch
              v-model="collectionForm.PATCH_LIST"
              active-value="1"
              inactive-value="0"
              class="float-right"
            />
          </div>

          <div class="mb-2">
            <span>{{ $t('modules.tms.group.manufacturer_information') }}</span>
            <el-switch
              v-model="collectionForm.DEVICE_MANUFACTURER"
              active-value="1"
              inactive-value="0"
              class="float-right"
            />
          </div>

          <div class="mb-2">
            <span>{{ $t('modules.tms.group.last_time_of_power_on') }}</span>
            <el-switch
              v-model="collectionForm.DEVICE_ON_TIME"
              active-value="1"
              inactive-value="0"
              class="float-right"
            />
          </div>

          <div class="mb-2">
            <span>{{ $t('modules.tms.group.current_running_time') }}</span>
            <el-switch
              v-model="collectionForm.DEVICE_UP_TIME"
              active-value="1"
              inactive-value="0"
              class="float-right"
            />
          </div>

          <div class="mb-2">
            <span>{{ $t('modules.tms.group.rear_camera_model') }}</span>
            <el-switch
              v-model="collectionForm.CAMERA_BACK_MODEL"
              active-value="1"
              inactive-value="0"
              class="float-right"
            />
          </div>

          <div class="mb-2">
            <span>{{ $t('modules.tms.group.front_camera_model') }}</span>
            <el-switch
              v-model="collectionForm.CAMERA_FRONT_MODEL"
              active-value="1"
              inactive-value="0"
              class="float-right"
            />
          </div>

          <div class="mb-2">
            <span>{{ $t('modules.tms.group.terminal_lock_status') }}</span>
            <el-switch
              v-model="collectionForm.DEVICE_LOCK_STATUS"
              active-value="1"
              inactive-value="0"
              class="float-right"
            />
          </div>

          <div class="mb-2">
            <span>{{ $t('modules.tms.group.location') }}</span>
            <el-switch
              v-model="collectionForm.LOCATION"
              active-value="1"
              inactive-value="0"
              class="float-right"
            />
          </div>
        </el-col>

        <el-col :md="12" class="border-r border-b p-5">
          <h2 class="mb-2">{{ $t('modules.tms.group.app_info') }}</h2>
          <div class="mb-2">
            <span>{{ $t('modules.tms.group.firmware_upgrade_times') }}</span>
            <el-switch
              v-model="collectionForm.OTA_EVENT_UPDATE"
              active-value="1"
              inactive-value="0"
              class="float-right"
            />
          </div>

          <div class="mb-2">
            <span>{{ $t('modules.tms.group.application_version_code') }}</span>
            <el-switch
              v-model="collectionForm.APP_VERSION_CODE"
              active-value="1"
              inactive-value="0"
              class="float-right"
            />
          </div>

          <div class="mb-2">
            <span>{{ $t('modules.tms.group.application_version_name') }}</span>
            <el-switch
              v-model="collectionForm.APP_VERSION_NAME"
              active-value="1"
              inactive-value="0"
              class="float-right"
            />
          </div>

          <div class="mb-2">
            <span>{{ $t('modules.tms.group.application_usage_time') }}</span>
            <el-switch
              v-model="collectionForm.APP_USAGE_COUNTS"
              active-value="1"
              inactive-value="0"
              class="float-right"
            />
          </div>

          <div class="mb-2">
            <span>{{ $t('modules.tms.group.application_wifi_traffic') }}</span>
            <el-switch
              v-model="collectionForm.APP_WIFI_TRAFFIC"
              active-value="1"
              inactive-value="0"
              class="float-right"
            />
          </div>

          <div class="mb-2">
            <span>{{ $t('modules.tms.group.application_sim_card_flow') }}</span>
            <el-switch
              v-model="collectionForm.APP_TRAFFIC"
              active-value="1"
              inactive-value="0"
              class="float-right"
            />
          </div>

          <div class="mb-2">
            <span>{{ $t('modules.tms.group.application_crash_log') }}</span>
            <el-switch
              v-model="collectionForm.APP_CRASH"
              active-value="1"
              inactive-value="0"
              class="float-right"
            />
          </div>

          <div class="mb-2">
            <span>{{ $t('modules.tms.group.application_installs') }}</span>
            <el-switch
              v-model="collectionForm.APP_EVENT_INSTALL"
              active-value="1"
              inactive-value="0"
              class="float-right"
            />
          </div>

          <div class="mb-2">
            <span>{{ $t('modules.tms.group.application_uninstalls') }}</span>
            <el-switch
              v-model="collectionForm.APP_EVENT_UNINSTALL"
              active-value="1"
              inactive-value="0"
              class="float-right"
            />
          </div>

          <div class="mb-2">
            <span>{{ $t('modules.tms.group.application_power_consumption') }}</span>
            <el-switch
              v-model="collectionForm.APP_POWER_PRECENT"
              active-value="1"
              inactive-value="0"
              class="float-right"
            />
          </div>

          <div class="mb-2">
            <span>{{ $t('modules.tms.group.application_power_consumption_details') }}</span>
            <el-switch
              v-model="collectionForm.APP_POWER_DETAIL"
              active-value="1"
              inactive-value="0"
              class="float-right"
            />
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import {
  queryGroupConfig,
  updateGroupTradeConfig,
  updateGroupCollectConfig
} from '@/api/group'
export default {
  props: {
    childData: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      radio: '1',
      // groupId: this.childData.groupId,
      groupId: this.$route.query.groupId,
      interfaceForm: {
        cmdQryChk: undefined,
        cmdQryPeriod: undefined,
        cmdQryPeriodUnit: undefined,
        dataCollChk: undefined,
        dataCollPeriod: undefined,
        dataCollPeriodUnit: undefined,
        devAppVUpChk: undefined,
        devAppVUpPeriod: undefined,
        devAppVUpPeriodUnit: undefined,
        heartbeatChk: undefined,
        heartbeatPeriod: undefined,
        heartbeatPeriodUnit: undefined,
        tradeCfgChk: undefined,
        tradeCfgPeriod: undefined,
        tradeCfgPeriodUnit: undefined,
        updateChk: undefined,
        updatePeriod: undefined,
        updatePeriodUnit: undefined
      },
      collectionForm: {},
      collectionItems: []
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      queryGroupConfig({ groupId: this.groupId }).then((res) => {
        this.interfaceForm = res.tradeCfg
        this.collectionItems = res.dataColl
        res.dataColl.forEach((collItem) => {
          var key = collItem.p.substring(12)
          this.$set(this.collectionForm, key, collItem.v)
        })
        console.log(this.collectionForm)
      })
    },
    saveTradeCfgData() {
      updateGroupTradeConfig({
        groupId: this.groupId,
        data: this.interfaceForm
      }).then((res) => {
        this.$message.success(this.$t('page.update_success'))
        this.fetchData()
      })
    },
    saveDataCollData() {
      var collItems = []
      for (var item in this.collectionForm) {
        var obj = {}
        obj[item] = this.collectionForm[item]
        collItems.push(obj)
      }
      updateGroupCollectConfig({ groupId: this.groupId, data: collItems }).then(
        (res) => {
          this.$message.success(this.$t('page.update_success'))
          this.fetchData()
        }
      )
    }
  }
}
</script>

<style lang="scss">
.collection-card {
  .el-card__body {
    padding: 0;
  }
}
</style>
